<template>
  <div class="detail-info">
    <a-descriptions :column="1" bordered>
      <a-descriptions-item label="描述">
        {{ currentDetailRecord.description || '--' }}
      </a-descriptions-item>
      <a-descriptions-item label="输入参数">
        <SearchTable :dataSource="inputList" @update:dataSource="updateInputList" />
      </a-descriptions-item>
      <a-descriptions-item label="输出参数">
        <SearchTable :dataSource="outputList" @update:dataSource="updateOutputList" />
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import SearchTable from './SearchTable'
import { getOutputList, getInputList } from '@/api/manage'

export default {
  name: 'ModelDetail',
  components: {
    SearchTable,
  },
  props: {
    currentDetailRecord: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    requestParams() {
      return {
        modelUuid: this.currentDetailRecord.uuid,
        version: this.currentDetailRecord.version,
      }
    },
    inputList() {
      if (!this.currentDetailRecord.inputData) {
        return []
      }
      if (typeof this.currentDetailRecord.inputData === 'string') {
        return JSON.parse(this.currentDetailRecord.inputData)
      }
      return this.currentDetailRecord.inputData
    },
    outputList() {
      if (!this.currentDetailRecord.outputData) {
        return []
      }
      if (typeof this.currentDetailRecord.outputData === 'string') {
        return JSON.parse(this.currentDetailRecord.outputData)
      }
      return this.currentDetailRecord.outputData
    },
  },
  methods: {
    updateInputList(newVal) {
      getInputList({
        ...this.requestParams,
        inputList: JSON.stringify(newVal),
      }).then((res) => {
        if (res.code === 200) {
          this.$set(this.currentDetailRecord, 'inputData', newVal)
          this.$message.success(res.message)
          // 通知父组件刷新
          this.$emit('update:currentDetailRecord', this.currentDetailRecord)
        }
      })
    },
    updateOutputList(newVal) {
      getOutputList({
        ...this.requestParams,
        outputList: JSON.stringify(newVal),
      }).then((res) => {
        if (res.code === 200) {
          this.$set(this.currentDetailRecord, 'outputData', newVal)
          this.$message.success(res.message)
          // 通知父组件刷新
          this.$emit('update:currentDetailRecord', this.currentDetailRecord)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped></style>
